<template>
  <div class="bg-white overflow-hidden">
    <div class="form-title">企业行业地位及对比竞争优势</div>
    <el-form
      v-loading="formLoading"
      ref="advantageForm"
      :model="advantageForm"
      :rules="rules"
    >
      <el-form-item label-width="0" prop="reamrkBackground" class="mt-4">
        <div class="m-label py-2">行业背景（限 400 字以内）</div>
        <el-input
          type="textarea"
          maxlength="400"
          :autosize="{ minRows: 5 }"
          show-word-limit
          v-model="advantageForm.reamrkBackground"
        ></el-input>
      </el-form-item>

      <el-form-item label-width="0" prop="reamrkContrast">
        <div class="m-label py-2">行业优势（限 400 字以内）</div>
        <el-input
          type="textarea"
          maxlength="400"
          :autosize="{ minRows: 5 }"
          show-word-limit
          v-model="advantageForm.reamrkContrast"
        ></el-input>
      </el-form-item>
      <div class="flex justify-between py-10 text-center">
        <el-button
          v-if="isSubmit"
          class="confirm-btn tracking-widest"
          type="primary"
          size="medium"
          @click="submitForm"
        >
          保存 / 下一步
        </el-button>

        <DeclareNextItem ref="next" v-show="false" />
      </div>
    </el-form>
  </div>
</template>

<script>
import { limitLength } from "@/utils/formRules.js";
import { saveAdvantage } from "@/api/declareForm/advantage";

export default {
  name: "AdvantageForm",
  props: {
    sourceList: {
      type: Object,
      default: {},
    },
    isSubmit: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    sourceList(v) {
      if (v) {
        this.advantageForm["reamrkBackground"] = v["reamrkBackground"];
        this.advantageForm["reamrkContrast"] = v["reamrkContrast"];
        if (this.$route.query.id) {
          this.advantageForm["relationId"] = parseInt(this.$route.query.id);
        }
      }
    },
  },
  data() {
    // 输入框校验长度
    var inputLimitLength = (maxLength) => {
      return limitLength(maxLength);
    };

    return {
      formLoading: false,
      advantageForm: {
        reamrkBackground: "",
        reamrkContrast: "",
        relationId: "",
      },
      rules: {
        reamrkBackground: [
          { required: true, message: "请输入行业背景", trigger: "blur" },
          {
            validator: inputLimitLength(400),
            trigger: "blur",
          },
        ],
        reamrkContrast: [
          { required: true, message: "请输入行业优势", trigger: "blur" },
          {
            validator: inputLimitLength(400),
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.initRelationId();
  },
  methods: {
    initRelationId() {
      let realationId = this.$route.query.id;
      if (realationId || realationId == 0) {
        this.advantageForm.relationId = parseInt(realationId);
      }
    },
    submitForm() {
      let formName = "advantageForm";
      let resFrom = this.advantageForm;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formLoading = false;
          saveAdvantage(resFrom).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "保存成功",
              });
              // 跳转至下一页
              this.$refs.next.nextDeclareItem();
            } else {
              this.$message.error(res.msg);
            }
            this.formLoading = false;
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
